<template>
  <div id="energy-model">
    <px-row :gutter="20" style="flex-wrap: nowrap">
      <px-col :span="17" style="min-width: 1100px">
        <div class="img_3d">
          <img class="img_bg" src="@/assets/images/energy/model.png" alt="" />
          <div v-if="buildData" class="show_data">
            {{ showTitle + ": " + buildData }}
          </div>
          <div class="img_3d_point">
            <div>
              <div class="point_1_title" :style="{ color: showPMD ? '#3B82F6' : '' }">PMD生产调度研发大楼</div>
              <img v-show="!showPMD" class="green_point_1" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('31')" />
              <img v-show="showPMD" class="blue_point_1" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_2_title" :style="{ color: showFAB ? '#3B82F6' : '' }">FAB生产厂房</div>
              <img v-show="!showFAB" class="green_point_2" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('17')" />
              <img v-show="showFAB" class="blue_point_2" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_3_title" :style="{ color: showHPM ? '#3B82F6' : '' }">HPM甲烷仓库</div>
              <img v-show="!showHPM" class="green_point_3" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('45')" />
              <img v-show="showHPM" class="blue_point_3" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_4_title" :style="{ color: showSGS ? '#3B82F6' : '' }">SGS特气站</div>
              <img v-show="!showSGS" class="green_point_4" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('59')" />
              <img v-show="showSGS" class="blue_point_4" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_5_title" :style="{ color: showCUB ? '#3B82F6' : '' }">CUB综合动力站</div>
              <img v-show="!showCUB" class="green_point_5" src="@/assets/images/energy/green_point.png" alt="" @click="changeImg('3')" />
              <img v-show="showCUB" class="blue_point_5" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
            <div>
              <div class="point_6_title" :style="{ color: showCUB ? '#3B82F6' : '' }">
                {{ showText }}
              </div>
              <img class="blue_point_6" src="@/assets/images/energy/blue_point.png" alt="" />
            </div>
          </div>
        </div>
      </px-col>
      <px-col :span="7" style="min-width: 440px">
        <div class="model-detail">
          <px-card shadow="always" class="common_card">
            <div class="model-title">能源占比</div>
            <div id="costMain" class="cost-content">
              <div id="energeMain1" class="energeMain1" />
            </div>
          </px-card>
          <px-card shadow="always" class="common_card mt_16">
            <div class="model-title">能源负荷趋势</div>
            <div class="energe_use">
              <px-radio-group v-if="activeName === 'HOT_WATER'" v-model="waterType1" size="small" @change="handleChangeFn">
                <px-radio-button label="ALL">总水</px-radio-button>
                <px-radio-button label="TW">自来水</px-radio-button>
                <px-radio-button label="UPW">UPW</px-radio-button>
                <px-radio-button label="RO">RO</px-radio-button>
                <px-radio-button label="PCW">PCW</px-radio-button>
                <px-radio-button label="RW">RW</px-radio-button>
              </px-radio-group>
              <div id="energeMain2" class="energeMain2" />
            </div>
          </px-card>
          <px-card shadow="always" class="common_card mt_16">
            <div class="model-title">能流图</div>
            <div v-if="activeName === 'HOT_WATER'" class="electricity-content">
              <px-radio-group v-model="waterType2" size="small" @change="handleChange">
                <px-radio-button label="ALL">总水</px-radio-button>
                <px-radio-button label="TW">自来水</px-radio-button>
                <px-radio-button label="UPW">UPW</px-radio-button>
                <px-radio-button label="RO">RO</px-radio-button>
                <px-radio-button label="PCW">PCW</px-radio-button>
                <px-radio-button label="RW">RW</px-radio-button>
              </px-radio-group>
              <div id="energeMain3" class="energeMain3" />
            </div>
            <div v-else class="electricity-content">
              <px-radio-group v-if="activeName === 'HOT_WATER'" v-model="waterType2" size="small" @change="handleChange">
                <px-radio-button label="ALL">总水</px-radio-button>
                <px-radio-button label="TW">自来水</px-radio-button>
                <px-radio-button label="UPW">UPW</px-radio-button>
                <px-radio-button label="RO">RO</px-radio-button>
                <px-radio-button label="PCW">PCW</px-radio-button>
                <px-radio-button label="RW">RW</px-radio-button>
              </px-radio-group>
              <div id="energeMain4" class="energeMain4" />
            </div>
          </px-card>
        </div>
      </px-col>
    </px-row>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
import * as echarts from "echarts";
import { useEventListener } from "@vueuse/core";
import { energyProportion, energyLoadTrend, energyFlowChart, queryBuildData, waterFlowChart } from "@/api/modules/energy";
import { useRouterStoreHook } from "@/store/modules/router";
import { emitter } from "@/utils/mitt";

const activeName = ref("ELECTRICTITY"); // 默认电
emitter.on("viceMenuChange", val => {
  activeName.value = val;
  energyProportionFn();
  energyLoadTrendFn();
  if (val === "HOT_WATER") {
    energyFlowChartFnWater();
  } else {
    energyFlowChartFn();
  }
});

onMounted(() => {
  nextTick(() => {
    energyProportionFn();
    energyLoadTrendFn();
    energyFlowChartFn();
  });
});

const waterType1 = ref("ALL");
const waterType2 = ref("ALL");

const showText = computed(() => {
  return activeName.value === "ELECTRICTITY" ? "电站模型" : activeName.value === "HOT_WATER" ? "市政水" : activeName.value === "HOT_STEAM" ? "市政蒸汽" : "市政LNG";
});
const showTitle = computed(() => {
  return activeName.value === "ELECTRICTITY" ? "电量" : activeName.value === "HOT_WATER" ? "水量" : activeName.value === "HOT_STEAM" ? "蒸汽" : "LNG";
});

onUnmounted(() => {
  emitter.off("viceMenuChange");
});

const routerStore = useRouterStoreHook();

const showPMD = ref(false);
const showFAB = ref(false);
const showHPM = ref(false);
const showSGS = ref(false);
const showCUB = ref(false);

const changeImg = (val: string) => {
  switch (val) {
    case "31":
      showPMD.value = true;
      showFAB.value = false;
      showHPM.value = false;
      showSGS.value = false;
      showCUB.value = false;
      break;
    case "17":
      showPMD.value = false;
      showFAB.value = true;
      showHPM.value = false;
      showSGS.value = false;
      showCUB.value = false;
      break;
    case "45":
      showPMD.value = false;
      showFAB.value = false;
      showHPM.value = true;
      showSGS.value = false;
      showCUB.value = false;
      break;
    case "59":
      showPMD.value = false;
      showFAB.value = false;
      showHPM.value = false;
      showSGS.value = true;
      showCUB.value = false;
      break;
    case "3":
      showPMD.value = false;
      showFAB.value = false;
      showHPM.value = false;
      showSGS.value = false;
      showCUB.value = true;
      break;
    default:
      break;
  }
  getBuildingData(val);
};

const buildData = ref("");
const getBuildingData = async v => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    energyType: activeName.value
  };
  const data: any = await queryBuildData(param);
  const buildList = data.details && data.details.length ? data.details.filter((item: any) => item.buildingId === v) : [];
  buildData.value = buildList.length > 0 ? buildList[0].consumeAmountFormat : null;
};

// 占比
const energyProportionFn = async () => {
  const param = {
    energyType: activeName.value,
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyProportion(param);
  energeEchart1(data);
};
const energeEchart1 = data => {
  let piedata = data.map(item => ({
    name: item.buildingName == null ? "null" : item.buildingName,
    value: item.proportion
  }));
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("energeMain1")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    tooltip: {
      trigger: "item",
      confine: true
    },
    color: ["#739AF4", "#5BD7A8", "#747F9C", "#F7C133", "#EA785F"],
    legend: {
      top: "20%",
      right: "15%",
      orient: "vertical",
      left: "right"
    },
    series: [
      {
        name: "能源占比",
        type: "pie",
        radius: ["40%", "70%"],
        // avoidLabelOverlap: false,
        // itemStyle: {
        //   borderRadius: 10,
        //   borderColor: "#fff",
        //   borderWidth: 2
        // },
        // label: {
        //   show: false,
        //   position: "center"
        // },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: "20",
        //     fontWeight: "bold"
        //   }
        // },
        // labelLine: {
        //   show: false
        // },
        data: piedata,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  // window.addEventLister('resize', function () {
  //     myChart.resize()
  // })
};
function handleChangeFn(val) {
  energyLoadTrendFn(val);
}
// 趋势
const energyLoadTrendFn = async (val?: string) => {
  let params = {};
  let param = {
    energyType: activeName.value,
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  if (activeName.value === "HOT_WATER") {
    params = {
      ...param,
      energySubtype: val ? val : waterType1.value
    };
  } else {
    params = { ...param };
  }
  let isWater = activeName.value === "HOT_WATER" ? true : false;
  const data: any = await energyLoadTrend(isWater, params);
  const xdata = ref([
    "00:00",
    "01:00",
    "02:00",
    "03:00",
    "04:00",
    "05:00",
    "06:00",
    "07:00",
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
    "22:00",
    "23:00"
  ]);
  const ydata = ref([]);
  energeEchart2(xdata.value, data.consumeData, data.spcData);
};
const energeEchart2 = (xdata, consumeDataFormat, spcDataFormat) => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("energeMain2")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  option = {
    color: ["#3B82F6", "#FFAD1F "],
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    grid: {
      left: "0px",
      top: "10px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ["line", "bar"] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    // legend: {
    //   data: ["Evaporation", "Precipitation", "Temperature"]
    // },
    xAxis: [
      {
        type: "category",
        data: xdata
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "kw",
        min: 0
      }
    ],
    series: [
      {
        name: "消耗数据",
        type: "line",
        // tooltip: {
        //   valueFormatter: function (value) {
        //     return value + " ml";
        //   }
        // },
        smooth: true,
        showSymbol: false,
        data: consumeDataFormat,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#3B82F6" },
            { offset: 1, color: "white" }
          ])
        }
      },
      {
        name: "SPC数据",
        type: "line",
        step: "start",
        showSymbol: false,
        // tooltip: {
        //   valueFormatter: function (value) {
        //     return value + " °C";
        //   }
        // },
        data: spcDataFormat,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFAD1F" },
            { offset: 1, color: "white" }
          ])
        }
      }
    ]
  };
  myChart.clear();
  option && myChart.setOption(option);
  // useEventListener('resize', function () {
  //     myChart.resize()
  // })
};
function handleChange(val) {
  energyFlowChartFnWater(val);
}
// 能流图-水
const energyFlowChartFnWater = async (val?: string) => {
  const param = {
    energyType: activeName.value,
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await waterFlowChart({
    ...param,
    energySubtype: val ? val : waterType2.value
  });
  energeEchart3(data.nodes, data.links);
};
const energeEchart3 = (xdata, ydata) => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("energeMain3")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  option = {
    // title: {
    //   text: "能流图"
    // },
    tooltip: {
      trigger: "item",
      confine: true,
      triggerOn: "mousemove"
    },
    grid: {
      left: "-20px",
      top: "8px",
      right: "150px",
      bottom: "0px",
      containLabel: true
    },
    series: {
      type: "sankey",
      data: xdata,
      links: ydata,
      label: {
        show: true,
        fontSize: 10
      }
    }
  };
  myChart.clear();
  option && myChart.setOption(option);
  // useEventListener('resize', function () {
  //     myChart.resize()
  // })
};
// 能流图
const energyFlowChartFn = async () => {
  const param = {
    energyType: activeName.value,
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyFlowChart(param);
  // const xdata = ref([]);
  // const ydata = ref([]);
  // xdata.value = data.nodes;
  // ydata.value = data.links;
  energeEchart4(data.nodes, data.links);
};
const energeEchart4 = (xdata, ydata) => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("energeMain4")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  option = {
    // title: {
    //   text: "能流图"
    // },
    tooltip: {
      trigger: "item",
      confine: true,
      triggerOn: "mousemove"
    },
    grid: {
      left: "-20px",
      top: "8px",
      right: "150px",
      bottom: "0px",
      containLabel: true
    },
    series: {
      type: "sankey",
      data: xdata,
      links: ydata,
      label: {
        show: true,
        fontSize: 10
      }
    }
  };
  myChart.clear();
  option && myChart.setOption(option);
  // useEventListener('resize', function () {
  //     myChart.resize()
  // })
};

// 监听楼栋点位点击事件
useEventListener(window.document, "click", function () {
  // 获取当前点击的元素
  var target = event.target || event.srcElement;
  // 判断是否为点击的元素
  switch (target.className) {
    case "blue_point_1":
      showPMD.value = false;
      buildData.value = "";
      break;
    case "blue_point_2":
      showFAB.value = false;
      buildData.value = "";
      break;
    case "blue_point_3":
      showHPM.value = false;
      buildData.value = "";
      break;
    case "blue_point_4":
      showSGS.value = false;
      buildData.value = "";
      break;
    case "blue_point_5":
      showCUB.value = false;
      buildData.value = "";
      break;
    default:
      break;
  }
  // if (target.className.indexOf("point") < 0) {
  //   currentPoint.value = "";
  //   showPMD.value = false;
  //   showFAB.value = false;
  //   showHPM.value = false;
  //   showSGS.value = false;
  //   showCUB.value = false;
  // }
});

// 反转数组
const reverseArray = (arr: any) => {
  let newArr = [];
  arr.forEach((item: any) => {
    newArr.unshift(item);
  });
  return newArr;
};
</script>
<style scoped lang="scss">
#energy-model {
  position: relative;

  .mt_16 {
    margin-top: 16px;
  }

  .model-title {
    position: relative;
    height: 32px;
    padding-left: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    color: #000;
    background-image: linear-gradient(to right, rgb(59 130 246 / 24%), rgb(59 130 246 / 0%));
    border-left: 4px solid #3b82f6;

    .icon {
      position: absolute;
      top: 8px;
      right: 0;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .img_3d {
    position: absolute;
    top: 270px;
    left: 200px;
    width: 900px;
    // background-image: url("@/assets/images/energy/model.png");
    // background-repeat: no-repeat;
    // background-size: cover;
    .show_data {
      position: absolute;
      top: -152px;
      left: 392px;
      width: 166px;
      height: 33px;
      font-size: 24px;
      line-height: 33px;
      color: #3b82f6;
    }

    .img_bg {
      width: 100%;
    }

    .img_3d_point {
      .point_1_title {
        position: absolute;
        top: 24px;
        left: 248px;
        font-size: 16px;
        font-weight: 400;
      }

      .green_point_1 {
        position: absolute;
        top: 70px;
        left: 314px;
        width: 40px;
        cursor: pointer;
      }

      .blue_point_1 {
        position: absolute;
        top: 42px;
        left: 296px;
        width: 67px;
        cursor: pointer;
      }

      .point_2_title {
        position: absolute;
        top: -44px;
        left: 426px;
        font-size: 16px;
        font-weight: 400;
      }

      .green_point_2 {
        position: absolute;
        top: 5px;
        left: 450px;
        width: 40px;
        cursor: pointer;
      }

      .blue_point_2 {
        position: absolute;
        top: -22px;
        left: 450px;
        width: 67px;
        cursor: pointer;
      }

      .point_3_title {
        position: absolute;
        top: -44px;
        left: 546px;
        font-size: 16px;
        font-weight: 400;
      }

      .green_point_3 {
        position: absolute;
        top: 5px;
        left: 560px;
        width: 40px;
        cursor: pointer;
      }

      .blue_point_3 {
        position: absolute;
        top: -22px;
        left: 560px;
        width: 67px;
        cursor: pointer;
      }

      .point_4_title {
        position: absolute;
        top: 6px;
        left: 638px;
        font-size: 16px;
        font-weight: 400;
      }

      .green_point_4 {
        position: absolute;
        top: 54px;
        left: 638px;
        width: 40px;
        cursor: pointer;
      }

      .blue_point_4 {
        position: absolute;
        top: 27px;
        left: 638px;
        width: 67px;
        cursor: pointer;
      }

      .point_5_title {
        position: absolute;
        top: 76px;
        left: 550px;
        font-size: 16px;
        font-weight: 400;
      }

      .green_point_5 {
        position: absolute;
        top: 120px;
        left: 580px;
        width: 40px;
        cursor: pointer;
      }

      .blue_point_5 {
        position: absolute;
        top: 93px;
        left: 580px;
        width: 67px;
        cursor: pointer;
      }

      .point_6_title {
        position: absolute;
        top: 14px;
        left: 792px;
        font-size: 16px;
        font-weight: 400;
        color: #3b82f6;
      }

      .blue_point_6 {
        position: absolute;
        top: 36px;
        left: 790px;
        width: 67px;
        cursor: pointer;
      }
    }
  }

  .close-title {
    position: absolute;
    top: 20px;
    right: 32px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .fix_height {
    height: 210px;
  }

  .ranks {
    .ranks-content {
      font-size: 12px;
      color: #4f4f4f;
    }

    .rankMain {
      height: 210px;
    }
  }

  .warns {
    .warns-content {
      display: flex;
      justify-content: space-around;
      margin-top: 16px;
      font-size: 12px;
      color: #4f4f4f;
      text-align: center;

      .moon-warn,
      .year-warn {
        .warn-title {
          font-size: 12px;
          color: #f26060;
        }

        .title {
          font-size: 12px;
          font-weight: bold;
          color: #000;
        }

        .num {
          font-size: 16px;
          color: #3b82f6;
        }

        .show-warn {
          .warn-title {
            .warntitle {
              display: none;
            }
          }
        }

        .show-warn:hover {
          .warn-title {
            .warntitle {
              display: block;
            }
          }
        }
      }
    }
  }

  .common_card {
    .tces {
      .tces-content {
        margin-top: 16px;
        font-size: 12px;
        color: #4f4f4f;

        .tckMain {
          height: 210px;
        }
      }
    }
  }

  .text-box1 {
    height: 0;
  }

  .text-box2 {
    height: 150px;
  }

  .model-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    .energeMain1,
    .energeMain2,
    .energeMain3 {
      height: 170px;
    }

    .energeMain4 {
      height: 170px;
    }

    .icon {
      width: 24px;
      height: 24px;
    }

    .title_tongbi {
      font-size: 14px;
    }

    .unit {
      font-size: 14px;
    }

    .cost-content {
      font-size: 12px;
      color: #4f4f4f;

      .content-top {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        border-bottom: 1px solid #e2e4ee;

        .title {
          font-size: 16px;
          font-weight: 600;
        }

        .content-top--left,
        .content-top--middle,
        .content-top--right {
          .top_title {
            display: flex;
            align-items: center;
          }

          .category {
            margin-bottom: 24px;

            .ng-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/naturalgas.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .water-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/hotwater.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .steam-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/steam.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .detail {
              .title {
                margin-bottom: 12px;
              }

              .unit {
                span {
                  font-size: 16px;
                  color: #3b82f6;
                }
              }
            }
          }

          .compared {
            display: flex;

            .num {
              padding-left: 10px;
              color: #34d399;
            }

            .numtype {
              padding-left: 8px;
            }

            .icon {
              width: 16px;
              height: 16px;
              background-image: url("@/assets/images/energy/uparrow.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content-top--left {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/energy.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content-top--middle {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/coal.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content-top--right {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/chip.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }
      }

      .content-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;

        .content_bottom_1,
        .content_bottom_2,
        .content_bottom_3,
        .content_bottom_4 {
          .top_title {
            display: flex;
          }

          .category {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .ng-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/naturalgas.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .water-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/hotwater.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .steam-img {
              width: 24px;
              height: 24px;
              background-image: url("@/assets/images/energy/steam.png");
              background-repeat: no-repeat;
              background-size: cover;
            }

            .detail {
              .title {
                margin-bottom: 12px;
              }

              .unit {
                span {
                  font-size: 16px;
                  color: #3b82f6;
                }
              }
            }

            .compared {
              display: flex;
              justify-content: space-between;

              .num {
                padding-left: 10px;
                color: #34d399;
              }

              .numtype {
                padding-left: 8px;
              }

              .icon {
                width: 16px;
                height: 16px;
                background-image: url("@/assets/images/energy/uparrow.png");
                background-repeat: no-repeat;
                background-size: cover;
              }
            }
          }
        }

        .content_bottom_1 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/electricity.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content_bottom_2 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/naturalgas.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content_bottom_3 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/steam.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }

        .content_bottom_4 {
          .top_title {
            .icon {
              background-image: url("@/assets/images/energy/water.png");
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }
      }
    }

    .energe_use {
      text-align: center;

      .energe_top {
        margin-bottom: 16px;
      }

      .elec_pro {
        display: flex;

        .energe_msg {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 16px;
        }
      }

      .steam {
        .steam-top1,
        .steam-top2 {
          padding-left: 20px;
          border-left: 1px solid #e2e4ee;
        }

        .steam-top0,
        .steam-top1,
        .steam-top2 {
          display: flex;

          .ng-img {
            width: 24px;
            height: 24px;
            background-image: url("@/assets/images/energy/naturalgas.png");
            background-repeat: no-repeat;
            background-size: cover;
          }

          .water-img {
            width: 24px;
            height: 24px;
            background-image: url("@/assets/images/energy/hotwater.png");
            background-repeat: no-repeat;
            background-size: cover;
          }

          .steam-img {
            width: 24px;
            height: 24px;
            background-image: url("@/assets/images/energy/steam.png");
            background-repeat: no-repeat;
            background-size: cover;
          }

          .steam-cont {
            margin-left: 8px;

            .title {
              font-size: 12px;
              color: #4f4f4f;
            }

            .total {
              font-size: 20px;
              color: #3b82f6;

              span {
                font-size: 12px;
                color: #4f4f4f;
              }
            }
          }
        }

        .steam-bottom1,
        .steam-bottom2 {
          margin-left: 20px;
        }

        .steam-bottom0,
        .steam-bottom1,
        .steam-bottom2 {
          margin-top: 21px;

          .title {
            font-size: 12px;
            color: #4f4f4f;

            .up-span {
              color: #34d399;
            }

            .down-span {
              color: #34d399;
            }
          }
        }
      }
    }

    .production-content {
      height: 160px;
      overflow: scroll;

      .production-table {
        table-layout: fixed;
        border-collapse: collapse;

        thead {
          height: 30px;
          font-size: 14px;
          line-height: 30px;

          .icon-title {
            width: 20px;
          }

          .water {
            width: 70px;
          }
        }

        tbody {
          height: 30px;
          font-size: 12px;
          line-height: 30px;
          text-align: center;

          .amount {
            color: #3b82f6;
          }
        }
      }
    }

    .electricity-content {
      text-align: center;

      .kwhMain {
        height: 210px;
      }
    }
  }
}
</style>
